<template>
    <div class="row_box">
        <el-row :id="`row_${id}`" class="row" :key="ctx.key.value">
            <template v-for="item in ctx.getChildren()">
                <el-col class="item" :span="8">
                    <FormItemView :id="item.id" :parentId="id" />
                </el-col>
            </template>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { byId } from '../lib/form'
import FormItemView from '../commponents/form_item.vue'

const props = defineProps<{ id: string }>()
const ctx = byId(props.id)
</script>

<style scoped lang="scss">
.row_box {
    min-height: 50px;
    padding: 5px;
    width: 100%;
    .row {
        min-height: 50px;
    }
}
</style>
